<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="showDialog=true"
                :disabled="!checkPermission('roles_add')"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table border="" :data="list" >
              <el-table-column type="index"  label="序号" width="120" />
              <el-table-column  prop="name" label="角色名称" width="240" />
              <el-table-column prop="describtion" label="描述" />
              <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button size="small" type="success" @click="assignPerm(row.rolesId)" :disabled="!checkPermission('roles_assignment')">分配权限</el-button>
                <el-button size="small" type="primary" @click="editRoles(row.rolesId)" :disabled="!checkPermission('roles_edit')">编辑</el-button>
                <el-button size="small" type="danger" @click="removeRoles(row.rolesId)"  :disabled="!checkPermission('roles_remove')">删除</el-button>


              </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                :current-page="page.page"
                :page-size="page.pagesize"
                :total="total"
                layout="prev,pager,next"
                @current-change="changePage"
              />
            </el-row>
          </el-tab-pane>

        </el-tabs>
      </el-card>
<!--      编辑弹窗-->
      <el-dialog title="编辑弹层" :visible="showDialog" @close="btnCancel">
        <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">

          <el-form-item label="角色名称" prop="name">
            <el-input v-model="roleForm.name" />
          </el-form-item>

          <el-form-item label="角色描述" >
            <el-input v-model="roleForm.describtion" />
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          </el-col>
        </el-row>
      </el-dialog>
<!--      分配权限弹窗-->
      <el-dialog :visible="showRightsDialog" @close="btnPermCancel">
        <el-tree
          ref="permTree"
          :data="permData"
          :props="defaultProps"
          :show-checkbox="true"
          :check-strictly="true"
          :default-expand-all="true"
          :default-checked-keys="selectCheck"
          node-key="id"
        />
        <!-- 确定 取消 -->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
            <el-button size="small" @click="btnPermCancel">取消</el-button>
          </el-col>
        </el-row>

      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getrolesList,removeRolesByid,getRolesDetail,editRoles,addRoles,assignPerm} from '@/api/roles'
import {getRights} from '@/api/rights'
import add from "@/views/organization/components/add";
import {tranListToTreeData} from "@/utils";

export default {
  name:'roles',
  data() {
    return {
      list: [], // 承接数组
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 10,
      },
      total: 0 ,// 记录总数
      showDialog: false,
      // 专门接收新增或者编辑的编辑的表单数据
      roleForm: {
        name:'',
        describtion:'',
        rolesId:0,
        permIds:[]
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],

      },
      /*=========分配权限======*/
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      showRightsDialog:false ,// 分配权限的弹窗
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: '', // 定义一个数组来接收 已经选中的节点
      rolesId:null
    }


  },
  created() {
    this.getrolesList()
    },
  methods:{
    //获取角色列表
   async getrolesList(){

   const {row,total}=  await getrolesList()
     this.total=total
     this.list=row


   },
    //分页改变时
    changePage(newPage){
    this.page.page = (newPage-1)*this.page.pagesize
      this.getrolesList()

    },

    //删除角色
  async  removeRoles(rolesId){
        //  提示
    try {
      await this.$confirm('确认删除该角色吗')
      // 只有点击了确定 才能进入到下方
      await removeRolesByid(rolesId)
      // 调用删除接口
      this.getrolesList() // 重新加载数据
      this.$message.success('删除角色成功')
    } catch (error) {
      console.log(error)
    }

    },

    //编辑角色信息
    async editRoles(rolesId){
      const result=  await getRolesDetail(rolesId)
      this.roleForm.name=result.name
      this.roleForm.describtion=result.describtion
      this.roleForm.rolesId=result.rolesId
      this.showDialog=true

    },

    //编辑角色信息弹窗关闭事件
    btnCancel(){
      this.roleForm = {
        name:'',
        describtion:'',
        rolesId:null,
        permIds:[]

      }
      // 移除校验
      this.$refs.roleForm.resetFields()
      this.showDialog = false
},

    //点击确认提交表单
   async btnOK(){
      try {
        await this.$refs.roleForm.validate()
        // 只有校验通过的情况下 才会执行await的下方内容
        // roleForm这个对象有id就是编辑 没有id就是新增
        if (this.roleForm.rolesId) {
          await editRoles(this.roleForm.rolesId,this.roleForm)
        } else {
          // 新增业务
          await addRoles(this.roleForm)
        }
        // 重新拉取数据
        this.getrolesList()
        this.$message.success('操作成功')
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }
    },

/*========================分配权限=======================*/
    //分配权限
  async  assignPerm(id){
      this.rolesId=id
    this.permData=tranListToTreeData( await  getRights(),0)
    console.log(this.permData)
   const  result2=await getRolesDetail(id)
    this.selectCheck=result2.permIds




    this.showRightsDialog=true

    },
   async btnPermOK(){


    const data=this.$refs.permTree.getCheckedNodes() //获取到选中的节点
     const arr=[]
    data.forEach(item =>{

          arr.push( item.id)

      })
     console.log(arr)


      await assignPerm({permIds:arr,id:this.rolesId})
     this.$message.success('分配权限成功')
      this.showRightsDialog=false
    },

    btnPermCancel(){

      this.selectCheck = [] // 重置数据
      this.showRightsDialog=false

    }

  }


}
</script>

<style scoped>

</style>
